<template>
  <!-- 需要引入mixin,loadingOption -->
  <div
    v-loading="pageLoading"
    :element-loading-text="loadingOption.text"
    :element-loading-spinner="loadingOption.spinner"
    :element-loading-background="loadingOption.background"
    class="orderDetail_main"
  >
    <div ref="pdfBox" class="pdfBox">
      <el-card shadow="never" class="card">
        <!-- pdf打印部分============↓ -->

        <!-- 进度条 -->
        <div class="step_main">
          <el-steps :active="step">
            <el-step
              v-for="(item, index) in stepList"
              :key="index"
              :title="item.name"
              :description="item.time ? item.time : ''"
            />
          </el-steps>
        </div>
        <el-divider />

        <!-- card body -->
        <!-- 商品信息 -->
        <div class="table-main">
          <div class="table-title">
            订单信息:
            <span style="margin-left: 10px">
              <el-tag
                v-if="status === 0"
                type="danger"
                size="small"
                effect="dark"
              >
                待付款
              </el-tag>
              <el-tag
                v-else-if="status === 1"
                size="small"
                type="warning"
                effect="dark"
                >待发货</el-tag
              >
              <el-tag v-else-if="status === 2" size="small"> 已发货 </el-tag>
              <el-tag v-else-if="status === 3" size="small" effect="dark"
                >已完成</el-tag
              >
              <el-tag
                v-else-if="status === 4"
                size="small"
                type="info"
                effect="dark"
                >已关闭</el-tag
              >
              <el-tag v-else type="info" size="small"> 无效订单 </el-tag>
            </span>
          </div>
          <!-- <TableComponent
          :table-data="orderTableData"
          :table-style="{
            width: '100%',
            margin: '30px auto',
            fontSize: '16px'
          }"
        /> -->
          <OrderTable :table-data="orderTableData" />
        </div>
        <el-divider />
        <!-- 收货人信息 -->
        <div class="table-main">
          <div class="table-title">收货人信息:</div>
          <!-- <TableComponent
          :table-data="userTableData"
          :table-style="{
            width: '100%',
            margin: '30px auto',
            fontSize: '16px'
          }"
        /> -->
          <OrderTable :table-data="userTableData" />
        </div>
        <el-divider />

        <div class="table-main">
          <div class="table-title">商品信息:</div>
          <el-table style="margin-top: 20px" :data="orderItemList" border>
            <el-table-column
              prop="productName"
              label="商品名称"
              align="center"
            />
            <el-table-column
              prop="productName"
              label="商品图片"
              width="200px"
              align="center"
            >
              <template slot-scope="scope">
                <img
                  style="width: 100px; height: 100px"
                  :src="scope.row.productPic"
                  alt=""
                />
              </template>
            </el-table-column>
            <el-table-column
              prop="isReturn"
              label="是否退货"
              width="250px"
              align="center"
            >
              <template slot-scope="scope">
                <span
                  v-if="scope.row.isReturn == 1"
                  style="color: red; cursor: pointer"
                  @click="goReturn(scope.row)"
                  >是</span
                >
                <span v-else>否</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="productBrand"
              label="品牌"
              width="200px"
              align="center"
            />
            <el-table-column
              prop="productPrice"
              label="价格"
              width="200px"
              align="center"
            />
            <el-table-column
              prop="productQuantity"
              label="商品数量"
              width="200px"
              align="center"
            />

            <el-table-column
              fixed="right"
              prop="totalPrice"
              label="小计"
              width="250px"
              align="center"
            />
          </el-table>
        </div>

        <!-- 费用信息 -->
        <div class="table-main">
          <div class="table-title">费用信息:</div>
          <!-- <TableComponent
          :table-data="costData"
          :table-style="{
            width: '100%',
            margin: '30px auto',
            fontSize: '16px'
          }"
        /> -->
          <OrderTable :table-data="costData" />
        </div>
        <el-divider v-if="status > 1" />

        <div v-if="status > 1" class="table-main">
          <div class="table-title">
            物流信息:
            <span style="color: gray"
              >{{ detailObj.deliveryCompany }} [
              {{ detailObj.deliverySn }} ]</span
            >
          </div>
          <el-table
            :data="expressData"
            border
            stripe
            style="width: 100%; margin-top: 25px"
          >
            <el-table-column prop="AcceptTime" label="时间" width="180" />
            <el-table-column prop="AcceptStation" label="状态" />
            <el-table-column prop="Remark" label="备注" width="450" />
          </el-table>
        </div>

        <!-- =====================================pdf打印部分↑ -->
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          class="form-lable"
          :inline="false"
          size="mini"
        >
          <el-row v-if="status === 1" :gutter="20">
            <el-col :span="6" :offset="0">
              <el-form-item prop="deliveryCompany" label="物流公司">
                <el-select
                  v-model="form.deliveryCompany"
                  class="myInput"
                  size="mini"
                  placeholder="请选择物流公司"
                  clearable
                >
                  <el-option
                    v-for="(item, index) in options"
                    :key="index"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-form-item prop="deliverySn" label="物流单号">
                <el-input
                  v-model="form.deliverySn"
                  class="myInput"
                  placeholder=""
                  size="mini"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="button_main">
          <!-- v-if="step===1" -->
          <el-button
            v-if="status === 1"
            type="primary"
            style="width: 150px"
            size="small"
            @click="sendOrder"
            >确认发货</el-button
          >
          <div v-if="status === 2">
            <el-button
              v-if="forceSendShow"
              type="primary"
              style="width: 150px"
              size="small"
              @click="forceFinishOrder"
            >
              强制确认收货
            </el-button>
          </div>
          <div v-if="status === 3">
            <el-button
              type="primary"
              style="width: 150px"
              size="small"
              @click="finishOrder"
              >关闭订单</el-button
            >
          </div>

          <!-- <el-button type="primary" size="default" ></el-button> -->
        </div>
      </el-card>
    </div>

    <!-- <el-button type="primary" size="small" @click="html2PDF"
      >打印订单</el-button
    > -->
  </div>
</template>

<script>
import orderApi from '@/api/order/index'
import OrderTable from '@/components/OrderTable/index'
// import tableComponent from '@/components/tableComponent/index'
import kdExpressData from './kdExpress.json'
import mixin from '@/mixins/index'
export default {
  name: 'OrederList',
  components: { OrderTable },
  mixins: [mixin],
  data() {
    return {
      options: [
        {
          id: 0,
          name: '顺丰快递'
        },
        {
          id: 1,
          name: '韵达快递'
        },
        {
          id: 2,
          name: '中国邮政'
        },
        {
          id: 3,
          name: '申通快递'
        },
        {
          id: 4,
          name: '中通快递'
        }
      ],
      form: {
        deliverySn: '',
        deliveryCompany: ''
      },
      rules: {
        deliveryCompany: [
          {
            required: true,
            message: '请填写物流公司',
            trigger: 'change'
          }
        ],
        deliverySn: [
          {
            required: true,
            message: '请填写物流单号',
            trigger: 'blur'
          }
        ]
      },
      forceSendShow: true,
      pageLoading: true,
      statusTrans: {
        0: '待付款',
        1: '待发货',
        2: '已发货',
        3: '已完成',
        4: '已关闭'
      },
      id: '',
      status: 0, // 当前状态
      stepList: [
        { name: '待付款' },
        { name: '待发货' },
        { name: '已发货' },
        { name: '已完成' },
        { name: '已关闭' }
      ],
      orderBaseObj: {},
      orderTableData: [], // 基本信息 mail-table  订单信息
      userTableData: [], // 基本信息 mail-table  收货人信息
      costData: [], // 基本信息 mail-table  收货人信息
      orderItemList: [] // 商品列表
      // orderTableData: [
      //     { key: '单号', value: '1001' },
      //     { key: '商品名称', value: '篮球' },
      //     { key: '价格', value: '120.00' },
      //     { key: '订单日期', value: '2017-03-01' },
      //     { key: '付款方式', value: '在线支付' },
      //     { key: '收货地址', value: '北京市海淀区西北旺镇' },
      //     { key: '收货地址', value: '北京市海淀区西北旺镇' },
      //     { key: '收货地址', value: '北京市海淀区西北旺镇' }
      // ],
    }
  },
  computed: {
    step() {
      return this.status + 1
    },
    expressData() {
      return kdExpressData.Traces
    }
  },
  created() {
    this.id = this.$route.params.id
    this.getOrderDetail()
    // orderApi.sendOrder().then(res => {console.log(res)})
  },
  methods: {
    // 去退单列表
    goReturn(row) {
      this.$router.push({
        name: 'orderBackDetail',
        params: { id: row.returnId }
      })
    },
    // 强制确认收货
    forceFinishOrder() {
      orderApi
        .forceFinishOrder(this.id)
        .then((res) => {
          if (res.success) {
            window.location.reload()
          } else {
            this.$message.error('关闭订单失败')
          }
        })
        .catch((res) => {
          this.$message.error('关闭订单失败')
        })
    },
    // 确认订单窗口
    sendOrder() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          orderApi
            .sendOrder({
              orderId: this.id,
              deliverySn: this.form.deliverySn,
              deliveryCompany: this.form.deliveryCompany
            })
            .then((res) => {
              if (res.success) {
                window.location.reload()
              } else {
                this.$message.error('确定订单失败')
              }
            })
            .catch((res) => {
              this.$message.error('确认订单失败')
            })
        } else {
          this.$message.warning('请填写必要信息')
        }
      })
    },
    // 关闭订单窗口
    finishOrder() {
      orderApi
        .finishOrder(this.id)
        .then((res) => {
          if (res.success) {
            window.location.reload()
          } else {
            this.$message.error('关闭订单失败')
          }
        })
        .catch((res) => {
          this.$message.error('关闭订单失败')
        })
    },

    // 获取详情
    getOrderDetail() {
      // orderApi.orderDetail(this.id).then((res) => {
      orderApi.orderDetail(this.id).then((res) => {
        if (res.success) {
          this.detailObj = res.data.orderDetail.orderBase
          this.orderItemList = res.data.orderDetail.orderItems
          // 初始化订单信息
          this.initOrderObj()
          // 初始化用户信息
          this.initUserObj()
          // 初始化进度条信息
          this.initStepList()
          // 初始化费用信息
          this.initCostObj()
          // 判断是否可以强制收货
          this.judgeForce()
        } else {
          this.$message.error('获取数据失败')
        }
        this.pageLoading = false
      })
    },
    judgeForce() {
      this.orderItemList.forEach((element) => {
        if (element.isReturn === 0) {
          this.forceSendShow = false
        }
      })
    },
    // 初始化订单Obj
    initOrderObj() {
      const orderObj = {
        订单金额: this.detailObj.totalAmount,
        订单编号: this.detailObj.orderSn,
        用户账号: this.detailObj.memberUsername,
        // 订单类型: this.detailObj.orderType === 1 ? '秒杀订单' : '正常订单',
        备注: this.detailObj.totalAmount,

        下单时间: this.detailObj.createTime,
        付款时间: this.detailObj.paymentTime,
        发货时间: this.detailObj.deliveryTime,
        收货时间: this.detailObj.receiveTime
      }
      // orderTableData
      for (const key in orderObj) {
        this.orderTableData.push({
          key: key,
          value: orderObj[key]
        })
      }
    },
    initUserObj() {
      const userObj = {
        收货人: this.detailObj.receiverName,
        用户姓名: this.detailObj.memberUsername,
        手机号码: this.detailObj.receiverPhone,
        邮政编码: this.detailObj.receiverPostCode,
        地市:
          this.detailObj.receiverProvince + ' ' + this.detailObj.receiverCity,
        详细地址: this.detailObj.receiverDetailAddress
      }
      for (const key in userObj) {
        this.userTableData.push({
          key: key,
          value: userObj[key]
        })
      }
    },
    initCostObj() {
      const costObj = {
        运费金额: 0,
        订单总金额: this.detailObj.totalAmount,
        实际金额: this.detailObj.payAmount,
        促销优化金额: this.detailObj.promotionAmount
          ? this.detailObj.promotionAmount
          : 0
      }
      for (const key in costObj) {
        this.costData.push({
          key: key,
          value: costObj[key]
        })
      }
    },

    // 初始化进度条信息
    initStepList() {
      this.stepList[0].time = this.detailObj.createTime
      this.stepList[1].time = this.detailObj.paymentTime
      this.stepList[2].time = this.detailObj.deliveryTime
      this.stepList[3].time = this.detailObj.receiveTime
      this.stepList[4].time = this.detailObj.finishTime
      this.status = this.detailObj.status
    }
    // html转化成pdf
    // html2PDF() {
    // this.$getPdf(this.$refs.pdfBox, '订单')

    //   this.$getPdf(this.$refs.pdfBox)
    // }
  }
}
</script>

<style lang="scss" scoped>
.orderDetail_main {
  min-height: 900px;
  padding-bottom: 10px;
  .form-lable {
    ::v-deep .el-form-item {
      label {
        font-weight: normal;
      }
    }
  }
  .step_main {
    margin: 30px auto;
    width: 80%;
  }
  .card {
    margin: 30px;
  }
  .table-main {
    margin: 20px 0;
    .table-title {
      color: rgba(0, 0, 0, 0.85);
      font-weight: 700;
      font-size: 16px;
      margin-bottom: 20px;
    }
  }
  .button_main {
    margin: 40px auto;
    display: flex;
    width: 100%;
    justify-content: center;
  }
  .myInput {
    width: 70%;
  }
  .pdfBox {
    position: relative;
    width: 100%;
    overflow: hidden;
  }
}
</style>